<template>
  <div class="all">
    <div class="left">
      <el-button
        @click="changeCollapse"
        plain
        icon="el-icon-menu"
        size="mini"
      ></el-button>
      <!-- <span>首页</span> -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(p, index) in breadData"
          :key="index"
          :to="{ path: p.path }"
        >
          <span :class="{ col: p.path == $route.path }">{{ p.name }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-dropdown class="right" trigger="click">
      <span class="el-dropdown-link">
        <img src="@/assets/img.png" alt="" />
        <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "ComHeader",
  data() {
    return {
      isCollapse: false,
    };
  },
  computed: {
    ...mapState("bread", ["breadData"]),
  },
  methods: {
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
      // console.log(this.isCollapse);
      this.$bus.$emit("xCollapse", this.isCollapse);
    },
  },
  mounted() {
    // console.log(this.$store.state);
  },
};
</script>

<style scoped lang='less'>
.all {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // line-height: 60px;
  .left {
    display: flex;
    .el-breadcrumb {
      margin-left: 20px;
      line-height: 28px;
      span {
        color: rgb(166, 166, 166);
      }
      .col {
        color:#eaca56;
      }
    }
  }
  .right {
    span {
      display: flex;
      align-content: center;
      img {
        width: 40px;
        height: 40px;
        // vertical-align:bottom
        border-radius: 50%;
      }
    }
  }
}
</style>